<template>
	<view style="background-color: #F5F5F5;">
		<!-- <view class="position-relative border" style="height: 400rpx;">
			<no-thing icon="no_pay" msg="你还没有待付款订单"></no-thing>
		</view> -->

		<!-- 选项卡 -->
		<view class="d-flex a-center font-md text-muted border-top border-bottom border-light-secondary bg-white">
			<view class="flex-1 d-flex a-center j-center py-2" :class="index === tabIndex ? 'tab-active' : ''"
				v-for="(item,index) in tabBars" :key="index" @tap="changeTab(index)">{{item.name}}</view>
		</view>
		<!-- 订单列表 -->
		<block v-for="(tab,tabI) in tabBars" :key="tabI">
			<view class="position-relative" v-show="tabI === tabIndex" style="min-height: 440rpx;">
				<template v-if="tab.list.length > 0">
					<block v-for="(item,index) in tab.list" :key="index">
						<order-list :item="item" :index="index"></order-list>
					</block>
				</template>
				<!-- 默认无 -->
				<template v-else>
					<no-thing :icon="tab.no_thing" :msg="tab.msg"></no-thing>
				</template>
			</view>
		</block>

		<view class="text-center main-text-color font-weight font-md mt-5">为你推荐</view>
		<view class="position-relative d-flex a-center j-center text-secondary mb-1 pt-3">
			<view class="px-3 position-absolute" style="background: #F5F5F5;z-index: 2;">买的人还买了</view>
			<view class="position-absolute" style="height: 1rpx; left: 0; right: 0; background-color: #cccccc;"></view>
		</view>
		<!-- 为你推荐 -->
		<view class="row j-sb bg-white">
			<common-list v-for="(item2,index2) in hotList" :key="index2" :item="item2" index="index2"></common-list>
		</view>
	</view>
</template>

<script>
	import noThing from "@/components/common/no-thing.vue"
	import commonList from "@/components/common/common-list.vue";
	import orderList from "@/components/order/order-list.vue"
	export default {
		components: {
			commonList,
			noThing,
			orderList
		},
		data() {
			return {
				list: [{
						create_time: "2024-03-25 19:38",
						status: "已发货",
						order_items: [{
							cover: "/static/images/demo/demo9.jpg",
							title: "小米9",
							price: "1999",
							attrs: "金色 标配",
							num: 2
						}],
						total_num: 3,
						total_price: 199.8,
					},
					{
						create_time: "2024-03-25 19:38",
						status: "已发货",
						order_items: [{
							cover: "/static/images/demo/demo9.jpg",
							title: "小米9",
							price: "1999",
							attrs: "金色 标配",
							num: 2
						}],
						total_num: 3,
						total_price: 199.8,
					}
				],
				tabIndex: 0,
				tabBars: [{
					id: "",
					name: "全部",
					no_thing: "no_pay",
					msg: "你还没有订单",
					list: [{
							create_time: "2024-03-25 19:38",
							status: "已发货",
							order_items: [{
								cover: "/static/images/demo/demo9.jpg",
								title: "小米9",
								price: "1999",
								attrs: "金色 标配",
								num: 2
							}],
							total_num: 3,
							total_price: 199.8,
						},
						{
							create_time: "2024-03-25 19:38",
							status: "已发货",
							order_items: [{
								cover: "/static/images/demo/demo9.jpg",
								title: "小米9",
								price: "1999",
								attrs: "金色 标配",
								num: 2
							}],
							total_num: 3,
							total_price: 199.8,
						}
					]
				}, {
					id: "",
					name: "待付款",
					no_thing: "no_pay",
					msg: "你还没有待付款订单",
					list: []
				}, {
					id: "",
					name: "待收货",
					no_thing: "no_pay",
					msg: "你还没有待收货订单",
					list: []
				}, {
					id: "",
					name: "待评价",
					no_thing: "no_pay",
					msg: "你还没有待评价订单",
					list: []
				}, ],
				hotList: [{
					cover: "/static/images/demo/list/1.jpg",
					title: "米家空调",
					desc: "1.5匹变频",
					oprice: 2699,
					pprice: 1399
				}, {
					cover: "/static/images/demo/list/1.jpg",
					title: "米家空调",
					desc: "1.5匹变频",
					oprice: 2699,
					pprice: 1399
				}, {
					cover: "/static/images/demo/list/1.jpg",
					title: "米家空调",
					desc: "1.5匹变频",
					oprice: 2699,
					pprice: 1399
				}, {
					cover: "/static/images/demo/list/1.jpg",
					title: "米家空调",
					desc: "1.5匹变频",
					oprice: 2699,
					pprice: 1399
				}, {
					cover: "/static/images/demo/list/1.jpg",
					title: "米家空调",
					desc: "1.5匹变频",
					oprice: 2699,
					pprice: 1399
				}]
			}
		},
		methods: {
			changeTab(index) {
				this.tabIndex = index
			}
		}
	}
</script>

<style>
	.tab-active {
		border-bottom: solid 5rpx #FD6801;
		color: #FD6801;
		margin-bottom: -5rpx;
	}
</style>